<template>
  <div id="storeinformation">
    <TopSubfield>我是顶部</TopSubfield>
    <centerSearch>我是顶部搜索框</centerSearch>
    <div class="information">
      <div class="store-shrink">
        <el-row>
          <el-col :span="17">
            <div class="grid-content bg-purple">
              <div class="grid-content-nam">
                <div class="grid-nam-top">
                  <strong>{{shopInfo.shopName}}</strong>
                  <p @click="showqrcode">手机扫码买单 更过优惠</p>
                  <i
                    :class="shopInfo.collected?'el-icon-star-on yessc':'el-icon-star-on'"
                    @click="handCollection"
                  ></i>
                </div>
                <div class="grid-nam-site">
                  <p>
                    位置：
                    <span>{{shopInfo.address}}</span>
                  </p>
                </div>
                <div class="grid-nam-site">
                  <p>
                    电话：
                    <a :href="shopInfo.mobile?shopInfo.mobile:shopInfo.phone">
                      <span>{{shopInfo.mobile?shopInfo.mobile:shopInfo.phone}}</span>
                    </a>
                  </p>
                </div>
                <div class="grid-nam-site" v-show="shopInfo.shopHours">
                  <p>
                    营业时间：
                    <span>{{shopInfo.shopHours}}</span>
                  </p>
                </div>
                <!-- otherService -->
                <div class="grid-nam-siteDes">
                  <p>优惠：</p>
                  <div class="ticket-right">
                    <div>
                      <div class="prcSingle">
                        <p>
                          满
                          <span>100</span>元减
                          <span>10</span>元
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="offer-serve">
                  <div class="offer-serve-left">
                    <div class="offer-unit" v-for="item in servicetype" :key="item">
                      <i :class="item=='wifi'?'icon iconfont icon-wifi':''"></i>
                      <i :class="item=='包间'?'icon iconfont icon-room':''"></i>
                      <i :class="item=='停车位'?'icon iconfont icon-P':''"></i>
                      <p v-if="item">提供{{item}}</p>
                    </div>
                  </div>
                  <div class="offer-serve-right">
                    <button @click="writeReview">
                      <i class="icon iconfont icon-muiiconrwrite"></i>
                      写评论
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

          <el-col :span="7">
            <div class="block">
              <el-carousel height="100%">
                <el-carousel-item v-for="(item,index) in commodityImages" :key="index">
                  <img :src="item" :alt="item">
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
        </el-row>

        <!-- 热销商品 -->
        <el-row class="custom">
          <el-col :span="17">
            <div class="list-left">
              <el-tabs v-model="activTab">
                <el-tab-pane
                  v-for="(item,index) in tabarr"
                  :key="index"
                  :label="item.tabname"
                  :name="item.ind"
                ></el-tab-pane>
              </el-tabs>
              <div v-if="actlist.length==0" class="sift-left btt-distance">此商家暂无上架此类商品</div>
              <div
                v-else
                class="sift-left btt-distance"
                v-for="(item,index) in actlist"
                :key="index"
              >
                <div class="sift-left-center">
                  <img :src="item.skuPic" alt>
                  <div class="sift-left-name">
                    <div>
                      <p>{{item.skuName}}</p>
                      <span>推</span>
                    </div>
                    <span v-if="activTab==0">库存：{{item.stockNum}}</span>
                    <span v-if="activTab==44 || activTab==41">库存：{{item.actGoodsSkuOut.stockNum}}</span>
                    <p>
                      ￥
                      <strong v-if="activTab==0">{{item.sellPrice}}</strong>
                      <strong
                        v-if="activTab==44 || activTab==41"
                      >{{item.actGoodsSkuOut.goodsPromotionRules.actAmount}}</strong>
                      <span class="ouThePrice" v-if="activTab!=0">
                        ￥
                        <b>{{item.marketPrice}}</b>
                      </span>
                    </p>
                  </div>
                </div>
                <div class="sift-right">
                  <!-- <router-link to="/submitOrder"> -->
                  <button @click="handbuy(item.id,index)">单独购买</button>
                  <!-- </router-link> -->
                </div>
              </div>
              <el-pagination
                small
                v-if="acttotal>5"
                layout="prev, pager, next"
                :total="acttotal"
                :page-size="5"
                @current-change="handactchange"
              ></el-pagination>
            </div>
            <!-- 网友评价 -->
            <div class="net-friend">
              <div class="net-header">
                <p>
                  网友点评
                  <span v-show="islogin">（{{cmttotal}}）</span>
                </p>
              </div>
              <div class="net-matter" v-if="islogin">
                <div
                  class="net-mesg"
                  v-show="commentlist"
                  v-for="item in commentlist"
                  :key="item.id"
                >
                  <div class="userMesg">
                    <img :src="item.userPic" alt>
                    <div>
                      <h2>{{item.nickName?item.nickName:item.userName}}</h2>
                      <span>{{item.createTime}}</span>
                    </div>
                  </div>
                  <div class="evaluation-content">
                    <span>{{item.content}}</span>
                    <div class="evaluation-img">
                      <img
                        v-for="(items,indexs) in item.uploadingimg"
                        :key="indexs"
                        :src="items.uploadImg1"
                        alt="items.uploadImg1"
                      >
                    </div>
                    <div :class="item.isZan == 0?'nozan thumbs':'yeszan thumbs'">
                      <div @click="handzan(item.id,item.isZan)">
                        <i class="icon iconfont icon-like"></i>
                        <span>点赞</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="net-matter" v-else>
                <div class="net-mesg">
                  <div class="userMesg">
                    <el-button type="primary" @click="handlogin">登录查看评论</el-button>
                  </div>
                </div>
              </div>
              <el-pagination
                v-if="total>5"
                background
                layout="prev, pager, next"
                :page-size="5"
                :total="total"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="list-right">
              <div>
                <div class="list-right-img">
                  <img :src="shopInfo.logoUrl?shopInfo.logoUrl:shopInfo.indexUrl">
                </div>
                <div class="broadside">
                  <div class="caption">
                    <em>猜你喜欢</em>
                    <span>广告</span>
                  </div>
                  <div
                    class="mmend"
                    v-for="(item,index) in recommendlist"
                    :key="index"
                    @click="handcom(item.goodsSku.shopId,item.id)"
                  >
                    <img :src="item.logoUrl" alt>
                    <div class="ct-message">
                      <p>{{item.skuName}}</p>
                      <p v-if="item.goodsSku && item.goodsSku.stockNum">
                        库存:
                        <span>{{item.goodsSku.stockNum}}</span>
                      </p>
                      <p>
                        ￥
                        <strong
                          v-if="item.goodsSku && item.goodsSku.sellPrice"
                        >{{item.goodsSku.sellPrice}}</strong>
                        <span class="ouThePrice" v-if="item.goodsSku && item.goodsSku.marketPrice">
                          ￥
                          <b>{{item.goodsSku.marketPrice}}</b>
                        </span>
                      </p>
                    </div>
                  </div>
                  <span class="batch" @click="nextBatch">换一批</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog title="写评论" :visible.sync="dialogComment" width="50%">
      <el-input type="textarea" :rows="10" placeholder="请输入评论内容" v-model="commentary"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogComment = false">取 消</el-button>
        <el-button type="primary" @click="handPublish">发表评论</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="isshopcode?'微信扫码进入商家主页面':'微信扫码进入微信小程序购买'"
      :visible.sync="dialogVisible"
      width="17%"
    >
      <div class="diatitle">{{isshopcode?shopInfo.shopName:buyobj.skuName}}</div>
      <div id="shopcode" v-if="isshopcode && dialogVisible"></div>
      <div id="qrcode" v-if="!isshopcode && dialogVisible"></div>
    </el-dialog>
    <bottomSynopsis>我是底部公共部分</bottomSynopsis>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Bus from "./../../../assets/js/bus.js";
import TopSubfield from "@/components/top/TopSubfield"; //公共头部
import centerSearch from "@/components/top/centerSearch"; //公共搜索
import bottomSynopsis from "@/components/bottom/bottomSynopsis"; //公共底部
export default {
  name: "storeinformation",
  components: {
    TopSubfield,
    centerSearch,
    bottomSynopsis
  },
  data() {
    return {
      shopId: "",
      activTab: "",
      commentary: "",
      page: 1,
      copage: 1,
      actpage: 1,
      acttotal: 0,
      total: 0,
      cmttotal: 0,
      totalpage: 0,
      buyobj: {},
      shopInfo: {},
      actlist: [],
      tabarr: [
        {
          ind: "0",
          tabname: "推荐菜"
        },
        {
          ind: "41",
          tabname: "砍价拼菜"
        },
        {
          ind: "44",
          tabname: "限量秒杀"
        }
      ],
      dishlist: [],
      commentlist: [],
      servicetype: [],
      recommendlist: [],
      commodityImages: [],
      isclidk: true,
      islogin: false,
      isshopcode: false,
      dialogVisible: false,
      dialogComment: false
    };
  },
  computed: {
    ...mapState(["token"])
  },
  watch: {
    dialogComment: function() {
      if (!this.dialogComment) {
        this.commentary = "";
      }
    },
    token: function() {
      if (this.token) {
        this.islogin = true;
      } else {
        this.islogin = false;
        this.shopInfo.collected = false;
        this.total = 0;
      }
    },
    dialogVisible: function() {
      if (!this.dialogVisible) {
        this.isshopcode = false;
      }
    },
    activTab: function() {
      this.actpage = 1;
      this.getdishlist();
    }
  },
  mounted() {
    Bus.$on("newshopid", message => {
      // 这里的message就是从广播中传来的数据
      this.shopId = message;
      this.init();
    });
  },
  methods: {
    //获取商家详情信息
    getshopInfo() {
      window.scrollTo(0, 0);
      this.$axios({
        url: "/api/website/shop/approve/get/" + this.shopId,
        method: "get",
        headers: {
          Authorization: this.token ? this.token : ""
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.shopInfo = res.data.data;
          this.commodityImages = [];
          if (res.data.data.otherService) {
            this.servicetype = res.data.data.otherService.split(",");
          } else {
            this.commodityImages.push(res.data.data.indexUrl);
            this.commodityImages.push(res.data.data.logoUrl);
          }
          if (res.data.data.shopTopPics.length > 0) {
            let _list = res.data.data.shopTopPics;
            for (let i in _list) {
              this.commodityImages.push(_list[i].value0);
            }
          }
        }
      });
    },
    //收藏与否
    handCollection() {
      if (!this.isclidk) {
        return;
      }
      if (this.islogin) {
        let _url = "",
          _this = this;
        if (this.shopInfo.collected) {
          _url = "/api/website/fvs/delete?shopId=" + this.shopId;
        } else {
          _url = "/api/website/fvs/add?shopId=" + this.shopId;
        }
        this.isclidk = false;
        this.$axios({
          url: _url,
          method: "POST",
          headers: {
            Authorization: this.token
          }
        }).then(res => {
          if (res.data.code == 0) {
            let _str = "";
            if (this.shopInfo.collected) {
              this.shopInfo.collected = false;
              _str = "取消收藏商铺成功！";
            } else {
              this.shopInfo.collected = true;
              _str = "收藏商铺成功！";
            }
            this.$message.success(_str);
            setTimeout(() => {
              _this.isclidk = true;
            }, 2000);
          }
        });
      } else {
        sessionStorage.setItem("oldhref", location.href);
        this.$confirm("收藏商家之前须先登录，是否立即登录?", "提示", {
          confirmButtonText: "立即登录",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //跳转去登录页面登录，然后返回
            this.$router.push("./login");
          })
          .catch(() => {
            sessionStorage.removeItem("oldhref");
          });
      }
    },
    //翻动评论分页器
    handleCurrentChange(val) {
      this.page = val;
      this.getcmtlist();
    },
    //获取评论数据列表
    getcmtlist() {
      let _parms = {},
        _value = "";
      _parms = {
        refId: this.shopId,
        cmtType: 5,
        zanUserId: 1400,
        page: this.page,
        rows: 5
      };
      for (var key in _parms) {
        _value += key + "=" + _parms[key] + "&";
      }
      _value = _value.substring(0, _value.length - 1);
      let _Url = "/api/website/cmt/list?" + _value;
      _Url = encodeURI(_Url);
      this.$axios({
        url: _Url,
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          let _list = res.data.data.list;
          this.total = res.data.data.total;
          if (_list && _list.length > 0) {
            for (let i in _list) {
              if (_list[i].userName) {
                _list[i].userName =
                  _list[i].userName.substr(0, 3) +
                  "****" +
                  _list[i].userName.substr(7);
              }
            }
          }
          this.commentlist = res.data.data.list;
          this.cmttotal = res.data.data.total;
        }
      });
    },
    //获取商家商品列表
    getdishlist() {
      let _parms = {},
        newarr = [],
        _value = "",
        _Url = "";
      if (this.activTab == 0) {
        _parms = {
          spuType: 10,
          page: this.actpage,
          hotrows: 1,
          rows: 5,
          status: 1,
          shopId: this.shopId
        };
        for (var key in _parms) {
          _value += key + "=" + _parms[key] + "&";
        }
        _value = _value.substring(0, _value.length - 1);
        _Url = "/api/website/goodsSku/approve/listNew?" + _value;
      } else if (this.activTab == 41 || this.activTab == 44) {
        // website/goodsSku/approve/listForAct
        _parms = {
          actId: this.activTab,
          shopId: this.shopId,
          page: this.actpage,
          rows: 5
        };
        for (var key in _parms) {
          _value += key + "=" + _parms[key] + "&";
        }
        _value = _value.substring(0, _value.length - 1);
        _Url = "/api/website/goodsSku/approve/listForAct?" + _value;
      }

      this.$axios.get(_Url).then(res => {
        if (res.data.code == 0) {
          this.actlist = [];
          this.acttotal = res.data.data.total;
          this.actlist = res.data.data.list;
        }
      });
    },
    //点击换一批，获取下一页推荐商品列表
    nextBatch() {
      this.copage++;
      if (this.copage > this.totalpage) {
        this.copage = 1;
      }
      this.getrecommendlist();
    },
    //获取推荐商品列表
    getrecommendlist() {
      let _parms = {},
        _value = "",
        _this = this;
      _parms = {
        // locationX: app.globalData.userInfo.lng,
        // locationY: app.globalData.userInfo.lat,
        city: sessionStorage.getItem("city"),
        page: this.copage,
        rows: 6
      };
      if (this.shopInfo.businessCate) {
        _parms.businessCate = this.shopInfo.businessCate
          .split("/")[0]
          .split(",")[0];
      }
      for (var key in _parms) {
        _value += key + "=" + _parms[key] + "&";
      }
      _value = _value.substring(0, _value.length - 1);
      this.$axios.get("/api/website/shop/approve/list?" + _value).then(res => {
        if (res.data.code == 0) {
          this.totalpage = Math.ceil(res.data.data.total / 6);
          let _list = res.data.data.list;
          _this.recommendlist = res.data.data.list;
        }
      });
    },
    //展示商家二维码
    showqrcode() {
      this.isshopcode = !this.isshopcode;
      this.dialogVisible = !this.dialogVisible;
      const _Url =
        "https://www.xiang7.net/service?flag=1&shopCode=" +
        this.shopInfo.shopCode;
      setTimeout(() => {
        $("#shopcode").qrcode(_Url);
      }, 50);
    },
    //翻动商品列表
    handactchange(val) {
      this.actpage = val;
      this.getdishlist();
    },
    //点击写评论
    writeReview() {
      if (this.islogin) {
        this.dialogComment = true;
      } else {
        sessionStorage.setItem("oldhref", location.href);
        this.$confirm("评论之前须先登录，是否立即登录?", "提示", {
          confirmButtonText: "立即登录",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //跳转去登录页面登录，然后返回
            this.$router.push("./login");
          })
          .catch(() => {
            sessionStorage.removeItem("oldhref");
          });
      }
    },
    //点击发表评论
    handPublish() {
      if (this.commentary) {
        let _parms = {},
          _value = "",
          _Url = "";
        _parms = {
          refId: this.shopId,
          cmtType: 5,
          content: this.commentary
        };
        for (var key in _parms) {
          _value += key + "=" + _parms[key] + "&";
        }
        _value = _value.substring(0, _value.length - 1);
        _Url = "/api/website/cmt/add?" + _value;
        _Url = encodeURI(_Url);
        this.$axios({
          url: _Url,
          method: "POST",
          headers: {
            Authorization: this.token
          }
        }).then(res => {
          if (res.data.code == 0) {
            this.getcmtlist();
            this.dialogComment = false;
            this.$message({
              message: "评论成功",
              type: "success"
            });
          }
        });
      } else {
        this.$message.error("评论不能为空！");
      }
    },
    //点击购买按钮
    handbuy(id, ind) {
      let _Url = "",
        _type = "",
        _actId = "",
        _obj = {};
      _obj = this.actlist[ind];
      this.buyobj = _obj;
      if (this.activTab == 44) {
        _type = 4;
      } else {
        _type = 2;
      }
      _actId = _obj.acthd ? _obj.acthd.actId : 41;
      _Url =
        "https://www.xiang7.net/service?flag=" +
        _type +
        "&id=" +
        id +
        "&shopId=" +
        _obj.shopId +
        "&categoryId=" +
        _obj.categoryId +
        "&actId=" +
        _actId;
      this.dialogVisible = true;
      setTimeout(() => {
        $("#qrcode").qrcode(_Url);
      }, 50);
    },
    //点赞、取消点赞
    handzan(id, zan) {
      if (!this.isclidk) {
        return;
      }
      let _parms = {},
        _value = "",
        _Url = "",
        _Ind = "",
        _this = this;
      _parms = {
        refId: id,
        type: 4,
        userId: 1400
      };
      this.isclidk = false;
      for (var i = 0; i < this.commentlist.length; i++) {
        if (this.commentlist[i].id == id) {
          _Ind = i;
        }
      }
      for (var key in _parms) {
        _value += key + "=" + _parms[key] + "&";
      }
      _value = _value.substring(0, _value.length - 1);
      if (zan == 0) {
        _Url = "/api/website/zan/add?" + _value;
      } else if (zan != 0) {
        _Url = "/api/website/zan/delete?" + _value;
      }
      _Url = encodeURI(_Url);
      this.$axios({
        url: _Url,
        method: "POST",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          let _Str = "";
          if (zan == 0) {
            this.commentlist[_Ind].isZan = 1;
            _Str = "点赞成功！";
          } else if (zan != 0) {
            this.commentlist[_Ind].isZan = 0;
            _Str = "取消点赞成功！";
          }
          this.$message({
            message: _Str,
            type: "success"
          });
        }
        setTimeout(() => {
          _this.isclidk = true;
        }, 2000);
      });
    },
    //点击某个推荐商品
    handcom(shopId, dishId) {
      this.shopId = shopId;
      this.dishId = dishId;
      this.init();
    },
    //初始事件群
    init() {
      this.getshopInfo();
      this.getdishlist();
      this.getrecommendlist();
      if (this.token) {
        this.getcmtlist();
      }
    },
    //点击评论登录
    handlogin() {
      sessionStorage.setItem("oldhref", location.href);
      this.$router.push("./login");
    }
  },
  created() {
    if (this.$route.query) {
      // this.shopId = this.$route.query.shopId;
      this.shopId = 35;
      this.dishId = this.$route.query.id ? this.$route.query.id : "";
    }
    this.activTab = this.tabarr[0].ind;
    if (this.token) {
      this.islogin = true;
    } else {
      this.islogin = false;
    }
    if (sessionStorage.getItem("oldhref")) {
      sessionStorage.removeItem("oldhref");
    }
    this.init();
  }
};
</script>

<style lang="less" scoped>
.diatitle {
  width: 90%;
  text-align: center;
  font-size: 24px;
  color: palevioletred;
  padding-bottom: 10px;
}
.el-pagination {
  margin-top: 10px;
  float: right;
}
.information {
  width: 100%;
  border-top: 3px solid #ec882d;
  display: flex;
  justify-content: center;
  background-color: #f6f6f6;

  .store-shrink {
    width: 1340px;
    .bg-purple {
      background: #d3dce6;
      margin-right: 10px;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 2px;
      min-height: 36px;
      background-color: #ffffff;
      display: flex;
      justify-content: center;
      .grid-content-nam {
        width: 100%;
        margin: 18px;
        .grid-nam-top {
          display: flex;
          align-items: center;
          strong {
            font-size: 22px;
            padding-right: 10px;
            font-weight: 600;
          }
          p {
            padding: 5px;
            font-size: 14px;
            margin: 15px;
            border: 2px solid red;
            color: #f63;
            background-color: #ffe9e1;
            cursor: pointer;
          }
          i {
            font-size: 30px;
            cursor: pointer;
          }
          .yessc {
            color: red;
          }
        }
        .grid-nam-site {
          width: 100%;
          height: 30px;
          line-height: 30px;
          span {
            padding-left: 12px;
          }
        }
        .grid-nam-siteDes {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-top: 10px;
          .ticket-right {
            width: 92%;
            display: flex;
            flex-wrap: wrap;
            div {
              .prcSingle {
                width: 132px;
                height: 42px;
                line-height: 42px;
                text-align: center;
                background-color: #ea684c;
                color: #ffffff;
                border-radius: 2px;
                margin: 0px 14px 16px 0px;
                p {
                  font-size: 13px;
                }
                p span:nth-child(1) {
                  font-size: 20px;
                }
                p span:nth-child(2) {
                  font-size: 20px;
                }
              }
            }
          }
        }
        .offer-serve {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid #dadada;
          .offer-serve-left {
            display: flex;
            align-items: center;
          }
          .offer-serve-right {
            button {
              margin-top: 26px;
              width: 100px;
              height: 36px;
              background-color: #ea684c;
              font-size: 16px;
              color: #ffffff;
              cursor: pointer;
              i {
                color: #ffffff;
              }
            }
          }
          .offer-unit {
            width: 80px;
            text-align: center;
            padding-top: 14px;
            i {
              font-size: 34px;
              color: #dadada;
            }
            p {
              font-size: 14px;
              padding-top: 10px;
            }
          }
        }
      }
      .grid-nam-site:nth-child(2) {
        padding-top: 10px;
      }
    }
    .el-row {
      .list-left {
        padding-right: 10px;
        .el-tabs {
          background-color: #ffffff;
          .el-tab-pane {
            border-bottom: 1px solid #f3f3f3;
          }
        }
        .sift-left {
          width: 100%;
          height: 140px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f2f2f2;
          .sift-left-center {
            width: 100%;
            display: flex;
            align-items: center;
            img {
              width: 110px;
              height: 110px;
              border-radius: 6px;
              margin-left: 20px;
            }
            .sift-left-name {
              width: 75%;
              height: 110px;
              margin-left: 20px;
              letter-spacing: 1px;
              line-height: 34px;
              span {
                font-size: 12px;
                color: #666;
              }
              .ouThePrice {
                text-decoration: line-through;
                padding-left: 12px;
              }
              div p {
                display: inline-block;
              }
              div span {
                background-color: red;
                padding: 2px;
                border-radius: 4px;
                color: #ffffff;
              }
            }
            .sift-left-name p:nth-child(1) {
              font-size: 16px;
              color: #222;
            }
            .sift-left-name p:nth-child(3) {
              font-size: 14px;
              color: #f60;
              strong {
                font-size: 28px;
              }
            }
          }
        }
        .sift-right {
          width: 30%;
          text-align: center;
          button {
            width: 100px;
            height: 34px;
            border-radius: 100px;
            background-color: #e6382f;
            color: #ffffff;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
      .list-right {
        background-color: #ffffff;
        .list-right-img {
          width: 100%;
          height: 175px;
          cursor: pointer;
          text-align: center;
          padding-top: 12px;
          img {
            width: 324px;
            height: 100%;
          }
        }
        .broadside {
          width: 325px;
          margin: 20px 0px 0px 15px;
          padding-bottom: 20px;
          .batch {
            cursor: pointer;
            float: right;
          }
          .caption {
            display: flex;
            justify-content: space-between;
            align-items: center;
            em {
              font-size: 16px;
              font-weight: 700;
            }
            span {
              color: #999;
            }
          }
          .mmend {
            width: 100%;
            margin: 16px 0px;
            display: flex;
            cursor: pointer;
            img {
              width: 120px;
              height: 92px;
            }
            .ct-message {
              line-height: 33px;
              padding-left: 8px;
            }
            .ct-message p:nth-child(1) {
              color: #666;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              font-size: 13px;
            }
            .ct-message p:nth-child(2) {
              color: #666;
              font-size: 12px;
            }
            .ct-message p:nth-child(3) {
              color: #f60;
              font-size: 12px;
              strong {
                font-size: 17px;
              }
              .ouThePrice {
                color: #666;
                padding-left: 20px;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
    .custom {
      padding: 20px 0;
      .net-friend {
        width: 98.8%;
        background-color: #fff;
        .net-header {
          // width: 100%;
          padding: 20px 18px 0px;
          font-size: 16px;
          color: #2c3e50;
          font-weight: 600;
          padding-bottom: 10px;
          border-bottom: 2px solid #ebebeb;
          span {
            font-weight: 500;
            color: #999;
          }
        }
        .net-matter {
          margin: 0px 20px;
          padding-bottom: 5px;
          .net-mesg {
            width: 100%;
            padding-top: 20px;
            .userMesg {
              display: flex;
              align-items: center;
              div {
                line-height: 34px;
                padding-left: 14px;
              }
              img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
              }
            }
            .evaluation-content {
              width: 91%;
              margin-left: 74px;
              padding-top: 8px;
              span {
                font-size: 14px;
                line-height: 20px;
              }
              .evaluation-img {
                width: 100%;
                margin-top: 6px;
                display: flex;
                flex-wrap: wrap;
                img {
                  width: 96px;
                  height: 96px;
                  margin: 0px 8px 8px 0px;
                  border-radius: 3px;
                }
                img:hover {
                  border: 2px solid #f60;
                  margin: -2px 6px 6px -2px;
                  cursor: pointer;
                }
              }
              .yeszan {
                color: red;
              }
              .nozan {
                color: #666;
              }
              .thumbs {
                text-align: right;
                border-bottom: 1px solid #e5e5e5;
                padding-bottom: 16px;
                div {
                  cursor: pointer;
                  display: inline;
                  letter-spacing: 1px;
                  .icon {
                    transform: rotate(70deg);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .block {
    height: 298px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    .el-carousel {
      padding-top: 14px;
      width: 92%;
      height: 88%;
    }
    .el-carousel__indicators {
      bottom: 14px !important;
    }
    .el-carousel__item img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

